<template>
  <div id="search">
    <div class="head">
      <router-link class="return" to='/'><img src="../assets/return.png"></router-link>
      <span>搜索</span>
      <router-link class="homepage" to = '/'>
          <img src="../assets/homepage.png">
          <span>首页</span>
      </router-link>
    </div>
    <div class="download">
      <a class="download1" href="imeituan://www.meituan.com/home/"></a>
      <a href="#" class="download2"></a>
    </div>
    <form class="seek">
      <div>
        <img src="../assets/search1.png">
        <input type="text" name="name" v-model="inputtext.name" placeholder="输入商家名、品类或商圈" />
      </div>
      <input  type="button" value="搜索"  class="searchbtn"/>
    </form>
    <ul class="surroundinghot">
      <li v-for= 'd in hot' :key="d.id">
        <a v-if="d.id == 1" :style="firstColor"> {{d.text}}</a>
        <a v-else>{{d.text}}</a>
      </li>
    </ul>
    <div class="footer">
      <div class="footer-bar">
        <button class="login" @click="login">登录</button>
        <button class="register" @click="register">注册</button>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;城市:</span>
        <button class="location" @click="citys">西安</button>
      </div>
      <ul class="footer-nav">
        <li>
          <a class="react" @click="homepage">首页</a>
        </li>
        <li>|</li>
        <li><a class="react" @click="login">我的</a>
        </li>
        <li>|</li>
        <li><a class="react"  href="//i.meituan.com/client" data-source="(direct)">美团下载</a>
        </li>
        <li>|</li>
        <li><a class="react" href="//www.meituan.com?pcstyle=1">电脑版</a>
        </li>
        <li>|</li>
        <li><a class="react"  @click="helps">帮助</a>
        </li>
      </ul>
      <div class="footer-links">友情链接：
        <a href="//m.maoyan.com/?channel=touch_group">猫眼电影</a>
        <a  href="//m.dianping.com">大众点评</a>
        <a href="https://i.meituan.com/awp/hfe/hotel-fe-itower_awp/journey/guide-download/index.html?refer_source=yqlj">美团旅行</a>
        <a href="//i.zhenguo.com" class="linkminsu">榛果民宿</a>
        <a href="//evt.dianping.com/synthesislink/9496.html">大众点评下载</a>
        <a href="https://xue.meituan.com/?from=mt0" class="linkschool">美团点评餐饮学院</a>
        <a href="https://i.meituan.com/awp/hfe/block/6c4bec785dce/11188/index.html">快驴进货商家合作</a>
      </div>
      <div class="footer-copyright">
        <div class="hr"></div>
        <span class="footer-copyright-text">©2018 美团网 <a href="http://www.miibeian.gov.cn/" target="_blank" rel="nofollow">京ICP证070791号</a></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      inputtext: {},
      hot: [
        { id: 1, text: '周边热门' },
        { id: 2, text: '魏家凉皮' },
        { id: 3, text: '鱼厂•专注烤鱼' },
        { id: 4, text: '袁记肉夹馍' },
        { id: 5, text: '大地影院' },
        { id: 6, text: '西安曲江海洋极地公园' },
        { id: 7, text: '一只酸奶牛' },
        { id: 8, text: '百富烤霸' },
        { id: 9, text: '陕西历史博物馆' },
        { id: 10, text: '享遇牛排海鲜自助餐厅' },
        { id: 11, text: '秦始皇帝陵博物院' }
      ],
      firstColor: {
        color: '#fdb338'
      }
    }
  },
  methods: {
    color2 () {
      this.style.color = 'red'
    },
    login () {
      this.$router.push('mine')
    },
    register () {
      this.$router.push('login')
    },
    citys () {
      this.$router.push('city')
    },
    homepage () {
      this.$router.push('/')
    },
    helps () {
      this.$router.push('help')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  *{
    margin: 0;
    padding: 0;
  }
  #search{
    width: 6.4rem;
    margin: 0 auto;
    background-color: #f0efed;
  }
  .head{
    width: 6.4rem;
    overflow: hidden;
    word-break: break-all;
    word-wrap: break-word;
    margin: 0 auto;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    padding: 0;
    height: 1rem;
    background-color: #06c1ae;
    border-bottom:1px solid #21897d;
    .return{
      img{
        display: block;
        width: .5rem;
        height: .5rem;
        margin: .25rem;
      }
    }
    span{
      font-size: .4rem;
      line-height: 1rem;
      color: #fff;
    }
    .homepage{
      display: flex;
      flex-direction: column;
      align-content: center;
      margin-right: .2rem;
      width: .6rem;
      img{
        display: block;
        width: .4rem;
        height: .4rem;
        margin: .1rem ;
      }
      span{
        display: block;
        line-height: .4rem;
        font-size: .2rem;
        text-align: center;
      }
    }
  }
  .download{
    width: 6.4rem;
    overflow: hidden;
    word-break: break-all;
    word-wrap: break-word;
    margin: 0 auto;
    height: 2rem;
    background-image: url("../assets/downloadbg.png");
    background-repeat: no-repeat;
    background-size:100% 100%;
    position: relative;
    .download1{
      width: 2rem;
      height: .7rem;
      position: absolute;
      left:1.1rem;
      bottom: .2rem;
    }
    .download2{
      width: 2rem;
      height: .7rem;
      position: absolute;
      right:1.1rem;
      bottom: .2rem;
    }
  }
  .seek{
    width: 6rem;
    height: .6rem;
    margin: .2rem;
    display: flex;
    justify-content: space-around;
    div{
      display: flex;
      border: 1px solid #d7d7d7;
      padding-top: .1rem;
      background-color: #fff;
      border-radius: .1rem;
      img{
        width: .35rem;
        height: .35rem;
        padding: 0 .1rem;
      }
      input{
        width: 3rem;
        height: .4rem;
        border: none;
        font-size: .2rem;
        line-height: .4rem;
      }
    }
    .searchbtn{
      display: block;
      width: 1.2rem;
      font-size: .25rem;
      border: none;
      background-color: #dcdcdc;
      color: #999;
      border-radius: .1rem;
    }

  }
  .surroundinghot{
    background-color: #fff;
    width: 6.4rem;
    height: 3.6rem;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    align-content: flex-start;
    li{
      width: 25%;
      height: .8rem;
      border-bottom: 1px solid #ddd8ce ;
      a{
        display: block;
        width: 100%;
        height: .8rem;
        padding-top: .2rem;
        font-size: .3rem;
        text-align: center;
        line-height: .8rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #999;
      }
      :before{
        content: '';
        position: absolute;
        width: 25%;
        left: 25%;
        height: .45rem;
        border-left: 1px solid #ddd8ce;
        border-right: 1px solid #ddd8ce;
        z-index: 0;
      }
      :after{
        content: '';
        position: absolute;
        width: 25%;
        right: 25%;
        height: .45rem;
        border-right: 1px solid #ddd8ce;
        z-index: 0;
      }
    }

  }
  .footer{
    height: 3.6rem;
    width: 6rem;
    margin: 0 auto;
    padding: .2rem;
    background-color: #f0efed;
    .footer-bar {
      font-size: .25rem;
      margin-bottom: .4rem;
      display: flex;
      justify-content: space-between;
      button{
        display: inline-block;
        width: 1.2rem;
        height: .6rem;
        border-radius: .06rem;
        font-size: .28rem;
        vertical-align: middle;
        line-height: .6rem;
        cursor: pointer;
        border: .02rem solid #06c1ae;
        padding: 0 .3rem;
        background: 0;
        color: #06c1ae;
      }
      .location{
        width: 1.8rem;
      }
      span{
        width: 1.2rem;
        text-align: center;
        line-height: .6rem;
        font-size: .3rem;
      }
    }
    .footer-nav{
      margin: 0;
      padding: .18rem 0;
      font-size: .22rem;
      display: flex;
      flex-direction:row;
      flex-wrap: nowrap;
      white-space: nowrap;
      justify-content: center;
      li{
        .line{
          color: black;
          line-height: 1.2rem;
        }
        a{
          display: block;
          height: 100%;
          overflow-x: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          padding: 0 .25rem;
          color: #06c1ae;
        }
      }
    }
    .footer-links{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      font-size: .24rem;
      margin: .3rem .2rem 0 .2rem;
      text-align: center;
      a{
        display: block;
        color: #06c1ae;
        font-size: .24rem;
        padding: 0 .2rem .1rem .3rem;
        text-align: center;
      }
      .linkminsu{
        margin: 0 0 0 .5rem;
      }
      .linkschool{
        margin: 0 0 0 .5rem;
      }
    }
    .footer-copyright {
      font-size: .05rem;
      text-align: center;
      position: relative;
      .hr {
        display: block;
        content: "";
        width: 100%;
        position: absolute;
        top: 50%;
        border-top: 1px solid #999;
        z-index: 2;
      }
      .footer-copyright-text {
        position: relative;
        width: 4rem;
        margin: 0 auto;
        color: #999;
        background-color: #f0efed;
        font-size: .05rem;
        display: flex;
        justify-content: center;
        z-index: 3;
        a{
          display: block;
          font-size: .05rem;
          color: #999;
        }
      }
    }
  }
</style>
